import styled from 'styled-components'
export const FooterWrapper = styled.div`
   height: 2.5rem;
   width:100%;
   background-color: white;
   position: fixed;
   padding-top:0.4rem;
   bottom: 0;
   left: 0;
   display: flex;
   right: 0;
   left: 0;
   justify-content: space-around;
   a {
      /* flex: 1; */
      display:flex;
      flex-direction: column;
      color:#666;
      font-size: 0.7rem;
      align-items: center;
      justify-content: space-around;
      text-decoration: none;
      &.active {
        color:#fd7877; 
      }

      i {
        font-size:1.4rem;
        span {
          display: inline-block;
          width: 1.125rem;
          height: 1.125rem;
          text-align: center;
          line-height: 1.125rem;
          font-size: 0.625rem;
          font-weight: bold;
          border-radius: 50%;
          color: white;
          background-color: rgb(255, 0, 0);
          position: absolute;
          top: -0.12rem;
          right: 1%;
          opacity: 0.8;
        }
      }
   }
   
`